import React, { Component } from 'react';
import {
  Comment, Avatar, Form, Button, List, Input,
} from 'antd';
import moment from 'moment';
const TextArea = Input.TextArea;

const CommentList = ({ comments }) => (
  <List
    dataSource={comments}
    header={`${comments.length} ${comments.length > 1 ? '留言' : '留言'}`}
    itemLayout="horizontal"
    renderItem={props => <Comment {...props} />}
  />
);

const Editor = ({
  onChange, onSubmit, submitting, value,
}) => (
  <div>
    <Form.Item>
      <TextArea rows={4} onChange={onChange} value={value} />
    </Form.Item>
    <Form.Item>
      <Button
        htmlType="submit"
        loading={submitting}
        onClick={onSubmit}
        type="primary"
        background="red"
      >
        留言
      </Button>
    </Form.Item>
  </div>
);

class App extends React.Component {
  state = {
    comments: [],
    submitting: false,
    value: '',
    vrr:''
  }
  componentDidMount () {
    let NAME = localStorage.getItem('names')
    this.setState({
      vrr:NAME
    })
  }
  handleSubmit = () => {
    if (!this.state.value) {
      return;
    }
    
    this.setState({
      submitting: true,
    });

    setTimeout(() => {
      
      this.setState({
        submitting: false,
        value: '',
        
        comments: [
          { 
            author: <p>{this.state.vrr}</p>,
            avatar: 'http://b-ssl.duitang.com/uploads/item/201603/26/20160326232537_Cz4mZ.jpeg',
            content: <p>{this.state.value}</p>,
            datetime: moment().fromNow(),
          },
          ...this.state.comments,
        ],
      });
    }, 1000);
  }

  handleChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  }

  render () {
    let vrr = this.state.vrr
    // console.log(vrr)
    const { comments, submitting, value } = this.state;
    return (
      <div>
     
      <Comment
          content={(
              <Editor
                onChange={this.handleChange}
                onSubmit={this.handleSubmit}
                submitting={submitting}
                value={value}
                
              />
            )}
        avatar={(
          <Avatar
            src="http://b-ssl.duitang.com/uploads/item/201603/26/20160326232537_Cz4mZ.jpeg"
            alt=""
            
          />
        )}
       
      />
      
       { comments.length > 0 && <CommentList  comments={comments} /> }
        
    </div>
    )
  }
}

export default App;